<template>
	<view>
		<!-- 顶部说明 -->
		<view class="top">
			<view class="uni-flex ">
				<view class="flex-item uni-bg-red">2020-2021-02学期</view>
				<view class="flex-item uni-bg-green">课程总数：{{total}}</view>
				<view class="flex-item uni-bg-blue">总学分：{{result}}</view>
			</view>
		</view>
		<!-- 课程展示 -->
		<!-- v-for="(index,item) in tasks" :key="index" -->
		<view class="show_task ">
			<view class="flex-item-V uni-flex  xf_show" v-for="(item,index) in tasks" :key="item.id">
				<view class="xf">学分：{{item.xf}}</view>
				<view class="show uni-bg-red">
					{{item.kcmc}}
					<view class="">
						{{item.xdfsmc}} {{item.zxs}}学时
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				total: 0, //课程总数
				sum: 0, //总学分
				tasks: [], //课程任务数据
				scrollTop: 0,
			}
		},
		onLoad() {
			this.getTasks()
		},
		methods: {
			//formSubmit(){
			// 	console.log(,)
			// },
			// 获取上课任务
			async getTasks() {
				const res = await this.$schoolRequest({
					url: '/xskktzd!getDataList.action',
					method: 'POST',
					data: {
						xnxqdm: '202002'
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						//'Cookie': '1C74E73890586036E63D98751F96AE65',
						'X-Requested-With': 'XMLHttpRequest',
						'Cookie': uni.getStorageSync("sessionid"),
					},
					success: (res) => {
						this.total = res.data.total
						this.tasks = res.data.rows
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
		},
		computed: {
			// 计算课程总学分
			result: function() {
				let sum = 0;
				for (let i = 0; i < this.tasks.length; i++) {
					//console.log(this.tasks[i].xf)
					sum+=parseFloat(this.tasks[i].xf)
					//console.log(this.sum)
				}
				return sum
				console.log(sum)
			}
		}
	}
</script>

<style lang="scss">
	.show_task {}

	.xf_show {
		.xf {
			width: 20%;
		}

		.show {
			width: 80%;
		}
	}

	.flex-item {
		width: 33.3%;
		height: 100%;
		text-align: center;
		//line-height: 100px;
	}

	.flex-item-V {
		width: 90%;
		height: 150rpx;
		margin: 10px auto;
		border: 1px solid $uni-bg-color-mask;
		border-radius: 10px;
	}

	/*课表任务通用*/
	.top {
		/* width:690rpx; */
		padding: 0;
		height: 100rpx;
	}

	.uni-flex {
		display: flex;
		flex-direction: row;
	}


	/* 背景色 */
	.uni-bg-red {
		background: #F76260;
		color: #FFF;
	}

	.uni-bg-green {
		background: #09BB07;
		color: #FFF;
	}

	.uni-bg-blue {
		background: #007AFF;
		color: #FFF;
	}
</style>
